<template>
	<scroll-view scroll-y style="background-color: #f2f2f7;height: 100vh;font-size: 40rpx;">
		<view style="border-width: 2rpx;border-color: #c6c6c8;border-style: solid;width: 100vw;background-color: #fff;margin-bottom: 15rpx;border-left-width: 0;border-right-width: 0;margin-top: 20rpx;">
			<view @click="color_index = index" style="width: 100vw;height: 100rpx;display: flex;flex-direction: row;" v-for="(item,index) in colors" :key='item'>
				<view style="width: 115rpx;height: 100rpx;display: flex;justify-content: center;align-items: center;">
					<view style="width: 32rpx;height: 32rpx;border-radius: 48rpx;" v-bind:style="{backgroundColor:item.border_color}"></view>
				</view>
				<view style="width: 635rpx;height: 100rpx;display: flex;flex-direction: column;">
					<view style="width: 635rpx;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view>{{item.name}}</view>
						<view style="margin-right: 40rpx;" v-if="index == color_index"><u-icon name="checkmark" color="#eb4d3d" size="48"></u-icon></view>
					</view>
					<view style="width: 635rpx;height: 2rpx;background-color: #c6c6c8;" v-if='index < colors.length-1'></view>
				</view>
			</view>
		</view>
		<button @click="back" style="width: 670rpx;margin-top: 24rpx;background-color: #e9426a;color: #fff;margin-bottom: 40rpx;">确定</button>
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				colors: colors,
				color_index:undefined
			}
		},
		// onLoad() {
		// 	this.event = getApp().globalData.event
		// },
		onShow(){
			console.log(getApp().globalData.color)
			console.log(1)
			if (getApp().globalData.color){
				this.color_index = getApp().globalData.color.id
			}
		},
		onUnload(){
			getApp().globalData.color = this.colors[this.color_index]
			console.log(getApp().globalData.color)
		
		},
		methods:{
			back(){
				getApp().globalData.color = this.colors[this.color_index]
				uni.navigateBack({})
			}
		}
	}
	export const colors=[
					{
						id:0,
						name:'红色',
						border_color:'#e9426a',
						background_color:'#f8d5e0',
						font_color:'#8c263f',
						fill_color:'#ea4c74',
						checked:false
					},
					{
						id:1,
						name:'橙色',
						border_color:'#f09a37',
						background_color:'#fbeace',
						font_color:'#905c1d',
						fill_color:'#f1a13d',
						checked:false
					},
					{
						id:2,
						name:'绿色',
						border_color:'#83d754',
						background_color:'#e3f6da',
						font_color:'#4e8131',
						fill_color:'#8bda5e',
						checked:false
					},
					{
						id:3,
						name:'蓝色',
						border_color:'#51aaf2',
						background_color:'#d6edfb',
						font_color:'#2f6691',
						fill_color:'#59b0f3',
						checked:false
					},
					{
						id:4,
						name:'紫色',
						border_color:'#c077db',
						background_color:'#f2e3f7',
						font_color:'#734783',
						fill_color:'#c481dc',
						checked:false
					},
					{
						id:5,
						name:'褐色',
						border_color:'#9d8563',
						background_color:'#ebe6df',
						font_color:'#5e4f3b',
						fill_color:'#a48e6f',
						checked:false
					}
				];
</script>
<style>
	.topic_cont_text {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	
	}
</style>